<template>
  <!-- 写法一： -->
  <!-- :class="['nav-item', { 'nav-current': index === curIdx }]" -->
  <!-- @click="navClick(index)" -->

  <div class="nav-item" :data-index="index">
    {{ item }}
  </div>
</template>

<script>
export default {
  name: "NavItem",
  props: {
    item: String,
    index: Number,
    // curIdx: Number,
  },
  setup(props, ctx) {
    //写法一：
    // const navClick = (index) => {
    /**
     * console.log(ctx);
     * {
     *   attrs: Proxy,
     *   emit: (event, ...args) => instance.emit(event, ...,
     *   expose: exposed => {…},
     *   slots: (...)
     * }
     */
    // ctx.emit("navClick", index);
    // };

    // 写法二：
    return {
      // navClick,
    };
  },
};
</script>

<style lang="scss" scoped>
.nav-item {
  width: 0.8rem;
  height: 100%;
  font-size: 0.14rem;
  line-height: 0.38rem;
  text-align: center;
  color: #666;

  &.nav-current {
    color: #db7093;
    font-weight: blod;
  }
}
</style>